{% extends "_layouts/examples.html" %}
{% block title %}Vertical spacing{% endblock %}

{% block content %}
<div class="p-strip is-bordered is-deep">
  <div class="row">
    <div class="col-4">
      <h2>Guidelines</h2>
      <p>If you are contributing to Vanilla, make sure to read and follow these guidelines.</p>
      <ul class="p-list--divided">
        <li class="p-list__item">
          <a href="" class="p-link--soft">Accessibility&nbsp;›</a>
        </li>
        <li class="p-list__item">
          <a href="" class="p-link--soft">Browser support&nbsp;›</a>
        </li>
        <li class="p-list__item">
          <a href="" class="p-link--soft">Coding standards&nbsp;›</a>
        </li>
      </ul>
    </div>
    <div class="col-6 col-start-large-7 u-vertically-center">
      <img src="https://assets.ubuntu.com/v1/4a810e12-guidelines-illustration.svg" alt="">
    </div>
  </div>
</div>
<section class="p-strip is-dark">
  <div class="row">
    <div class="col-12">
      <h2>Title</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam</p>
    </div>
    <div class="col-6">
      <img src="https://assets.ubuntu.com/v1/63c08d11-suru-background.png" alt=""/>
    </div>
  </div>
</section>
<section class="p-strip is-bordered">
  <div class="row">
    <div class="col-4 p-card">
      <p class="p-card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
    <div class="col-4 p-card">
      <p class="p-card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
    <div class="col-4 p-card">
      <p class="p-card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <button class="p-button">Default button</button>
    </div>
  </div>
</section>
<section class="p-strip is-bordered">
  <div class="row p-divider">
    <div class="col-9 p-divider__block">
      <h2>Latest news from Insights</h2>
      <div class="row">
        <div class="col-3">
          <h3>Kernel Team Summary – September 13, 2017</h3>
          <p><time pubdate="" datetime="Wed, 13 Sep 2017 19:46:56 +0000">13 September 2017</time></p>
        </div>
        <div class="col-3">
          <h3>Running Ubuntu Containers with Hyper-V Isolation on Windows</h3>
          <p><time pubdate="" datetime="Wed, 13 Sep 2017 16:00:39 +0000">13 September 2017</time></p>
        </div>
        <div class="col-3">
          <h3>Congratulations to GNOME on the release of 3.26</h3>
          <p><time pubdate="" datetime="Wed, 13 Sep 2017 14:47:59 +0000">13 September 2017</time></p>
        </div>
      </div>
    </div>
    <div class="col-3 p-divider__block">
      <h2>Spotlight</h2>
      <h3>Why containers and automation are essential in a world being eaten by software</h3>
      <p><time pubdate="" datetime="Thu, 31 Aug 2017 15:00:00 +0000">31 August 2017</time></p>
    </div>
  </div>
</section>
<section class="p-strip">
  <div class="row">
    <div class="col-8">
      <h2>Manage your servers without leaving your seat</h2>
      <p>Use the Web <abbr title="User interface">UI</abbr> or the command line (<abbr
          title="Command line interface">CLI</abbr>) to remotely manage your nodes or use the <abbr
          title="Application programming interface">API</abbr> to automate management.</p>
    </div>
  </div>
  <div class="row p-divider">
    <div class="col-6 p-divider__block">
      <img src="https://assets.ubuntu.com/v1/df1e6f24-Operate-your-machines-remotely.png?h=295" alt="">
      <h3>Operate your machines remotely</h3>
      <p>Manage individual or groups of servers.</p>
      <ul>
        <li>Power on/off</li>
        <li>Commission</li>
        <li>Deploy</li>
        <li>Assign an owner</li>
        <li>Mark a node fixed or broken</li>
        <li>Enter rescue mode </li>
        <li>Test your hardware</li>
        <li>Assign to physical zones</li>
      </ul>
      <p>
        <a href="#maas/2.2/intro-concepts#node-actions">Learn more about the node actions</a>
      </p>
    </div>
    <div class="col-6 p-divider__block">
      <img src="https://assets.ubuntu.com/v1/6ecf284f-Provision-with-any-OS-image.png?h=293" alt="">
      <h3>Provision with any <abbr title="Operating system">OS</abbr> image</h3>
      <p>Select the <abbr title="Operating system">OS</abbr> you require in your data centre <span
          aria-describedby="image-info">*</span></p>
      <ul>
        <li>Ubuntu</li>
        <li>CentOS</li>
        <li>Windows</li>
        <li>RHEL</li>
        <li>SUSE</li>
      </ul>
    </div>
  </div>
</section>
{% endblock %}
